<template>
	<view class="page-content bg-grey">
		<view class="scroll-Y pagebt75">
			<u-navbar title="加入公司" :is-back="true" :background="background"></u-navbar>
			<view class="searchBox px-3">
				<u-form :model="formData" ref="uForm">
					<view class="d-flex  pt-5 form ">
						<!-- <view>
					<hpy-form-select
						:dataList="industrialMarkList"
						text="name"
						name="dictId"
						v-model="formData.companyServiceTypeId"
						@change="getcompanyServiceTypeName"
						title="全部产业"
						hideBorder
					/>		
					</u-form-item>
				</view> -->
						<view class="u-m-l-10 flex-1">
							<u-search
								placeholder="搜索"
								bg-color="#fff"
								placeholder-color="#fff"
								v-model="filterText"
								:show-action="false"
							></u-search>
						</view>
					</view>
				</u-form>
			</view>

			<view class="mt-2 ">
				<ly-tree
					ref="tree"
					check-on-click-node
					:filter-node-method="filterNode"
					child-visible-for-filter-node
					:props="props"
					:tree-data="companyList"
					node-key="companyId"
					:children="'childNode'"
					:showRadio="showRadio"
					:checkOnlyLeaf="checkOnlyLeaf"
				></ly-tree>
			</view>
		</view>
		<view class="subarea">
			<u-button hover-class="none" shape="square" type="primary" class="btn-fill" @click="hanglgSubmitFn">
				确定
			</u-button>
		</view>
	</view>
</template>

<script>
import { getDictByParentId, getCompanySelectByCompanyServiceTypeId, joinCompany } from '@/api/apis.js';
export default {
	data() {
		return {
			background: {
				backgroundColor: '#fff'
			},
			industrialMarkList: [],
			props: {
				label: 'companyName',
				children: 'childNode'
			},
			showRadio: true,
			checkOnlyLeaf: true,
			filterText: '',
			parentCompany: [],
			formData: {
				companyServiceTypeId: ''
			},
			companyList: []
		};
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val, this.filterNodeData);
		}
	},
	onLoad() {
		// this.industrialMarkFn();
		this.getCompanySelectByCompanyServiceTypeFn();
	},
	methods: {
		//切换产业
		getcompanyServiceTypeName(e) {
			this.getCompanySelectByCompanyServiceTypeFn(e);
		},
		//获取产业标记
		industrialMarkFn() {
			getDictByParentId({
				parentId: 'COMPANY_SERVICE'
			}).then(res => {
				if (res.code == 10000) {
					this.industrialMarkList = res.data.map(obj => ({ ...obj }));
				} else {
					this.$u.toast(res.msg);
				}
			});
		},
		getCompanySelectByCompanyServiceTypeFn(e) {
			getCompanySelectByCompanyServiceTypeId({
				companyServiceTypeId: e ? e.value : ''
			}).then(res => {
				if (res.code == 10000) {
					this.companyList = res.data.map(obj => ({ ...obj, ['childNode']: [] }));
				} else {
					this.$u.toast(res.msg);
				}
			});
		},

		//确定
		hanglgSubmitFn() {
			let array = this.$refs.tree.getCheckedNodes();
			joinCompany({
				companyId: array[0].companyId
			}).then(res => {
				if (res.code == 10000) {
					this.$Router.replaceAll({
						path: '/userPages/pages/login/login'
					});
				} else {
					this.$u.toast(res.msg);
				}
			});
		},
		//过滤
		filterNode(value, data) {
			if (data.userVos) {
				data.userVos.forEach(a => {
					this.$set(a, 'companyName', a.realName);
					data.childNode.push(a);
				});
			}
			if (!value) return true;
			return data.companyName.indexOf(value) !== -1;
		}
	}
};
</script>
<style lang="scss" scoped>
.searchBox {
	::v-deep .select-picker {
		width: 120px !important;
		background-color: #fff !important;
	}
	::v-deep .u-content {
		border-radius: 8px !important;
		height: 40px !important;
		background-color: #fff !important;
		flex: 1;
	}

	::v-deep .u-radio {
		background-color: #ffffff;
		margin-bottom: 20rpx !important;
		padding: 20rpx !important;
		border-radius: 8px;
	}
}
::v-deep .uicon-search {
	color: #0052d9 !important;
}
::v-deep .u-radio__label {
	color: #86909c !important;
}
::v-deep .ly-tree-node {
	padding: 10rpx 20rpx !important;
	border-radius: 8px;
	background-color: #fff;
	margin-bottom: 20rpx;
}
::v-deep .ly-tree {
	padding: 30rpx 0 !important;
	margin: 0 30rpx;
	background-color: #f2f3f5 !important;
}
</style>
